const React = require('react');
const PropTypes = require('prop-types');
const {
    View,
    StyleSheet,
    TextInput
} = require('react-native');
const {
    JDScrollView,
    JDText,
    JDRouter,
    JDButton,
    JDTouchable,
} = require('@areslabs/jdreact-core-lib');
const { NavigationBar } = JDRouter;

function getMockData() {
    let result = [];
    for (let i = 0; i < 100; i++) {
        result.push(`Hello ${parseInt(Math.random() * 10000)}`);
    }
    return result;
}

class PullScrollView extends React.Component {
    state = {
        isRefreshing: false,
        data: getMockData(),
    };
    static contextTypes = {
        router: PropTypes.object
    };
    render() {
        return (
            <View style={styles.wrapper}>
                <NavigationBar Title="JDScrollView" />
                <JDScrollView
                    keyboardShouldPersistTaps={'always'}
                    style={styles.wrapper}
                    contentContainerStyle={styles.contentContainerStyle}
                    scrollEventThrottle={200}
                    refreshing={this.state.isRefreshing}
                    renderHeader={this._renderHeader}
                    onRefresh={() => { this.onRefresh(); }}>
                    {this._renderBody()}
                </JDScrollView>
            </View>
        );
    }

    _renderHeader = (refreshStatus) => {
        var status = "";
        switch (refreshStatus) {
            case 'pullToRefresh':
                status = '下拉刷新';
                break;
            case 'releaseToRefresh':
                status = '松手更新';
                break;
            case 'refreshing':
                status = '刷新中。。。。';
                break;
        }
        return <JDText>{status} </JDText>

    };

    _renderBody = () => {
        return (
            <View>
                <View style={{ paddingTop: 20, paddingLeft: 10, paddingRight: 10, paddingBottom: 30 }}>
                    <JDText style={{ fontSize: 16 }}>JDScrollView底层使用了React Native的ScrollView, 修复了ScrollView在IOS7上crash的问题,且支持京东统一的下拉刷新</JDText>
                </View>
                <TextInput editable={true} style={{ borderWidth: 1 }} />
                {
                    this.state.data.map((rowData, index) => (
                        <JDTouchable key={`key-${index}`} contentContainerStyle={styles.row} onPress={() => {
                            //   console.log(this.context.router)
                            this.context.router.push({
                                routeName: 'example-JDText'
                            });
                        }}>
                            <JDText>{rowData}</JDText>
                        </JDTouchable>
                    ))
                }
            </View>
        )
    };

    onRefresh = () => {
        this.setState({
            isRefreshing: true,
        });
        setTimeout(() => {
            this.setState({
                isRefreshing: false,
                data: getMockData(),
            });
        }, 3000);
    };
}

const styles = StyleSheet.create({
    wrapper: {
        flex: 1,
    },
    contentContainerStyle: {
        backgroundColor: 'rgba(0, 0, 0, 0.1)'
    },
    row: {
        height: 100,
        borderColor: '#F00',
        borderWidth: 1,
        marginVertical: 10,
    }
});

module.exports = PullScrollView;
